在使用语音合成模型的实践中，我们通常采用将 Base64 字符串转换为 Blob（二进制对象）的方式来播放语音。

/**
 * 将 Base64 音频数据转换为 Blob URL
 * @param base64AudioData - Base64 编码的音频数据字符串
 * @returns 可用于音频播放的临时 Blob URL
 */
function createBlobURL(base64AudioData: string, mimeType: string = 'audio/mp3'): string {
  // 1. 解码 Base64 数据
  const byteCharacters = atob(base64AudioData);
  
  // 2. 转换为字节数组
  const byteArrays = new Uint8Array(byteCharacters.length);
  
  for (let offset = 0; offset < byteCharacters.length; offset++) {
    byteArrays[offset] = byteCharacters.charCodeAt(offset);
  }

  // 3. 创建 Blob 对象
  const blob = new Blob([byteArrays], { type: mimeType });

  // 4. 生成并返回临时 URL
  return URL.createObjectURL(blob);
}

• 注意：atob() 函数只能解码 纯 Base64 字符串（不能包含 Data URL 前缀）

// 安全播放函数（自动内存管理）
function playAudioSafely(base64Data: string) {
  // 提取纯Base64部分
  const pureBase64 = base64Data.split(',')[1]; 
  
  // 创建临时Blob URL
  const audioUrl = createBlobURL(pureBase64);
  const audio = new Audio(audioUrl);

  // 内存释放函数
  const releaseResources = () => {
    URL.revokeObjectURL(audioUrl); // ⭐️ 关键释放
    console.log('已释放Blob URL资源');
  };

  // 设置自动清理监听器
  audio.addEventListener('ended', releaseResources);   // 播放结束
  audio.addEventListener('error', releaseResources);  // 播放出错
  audio.addEventListener('abort', releaseResources);   // 用户取消

  // 开始播放
  audio.play().catch(err => {
    console.error('播放失败:', err);
    releaseResources(); // 播放失败时立即清理
  });

  // 返回audio对象以便外部控制
  return audio;
}

// 使用示例
const audioData = 'data:audio/mp3;base64,SUQzBAAAAA...'; // 示例数据

// 方式一：自动管理（推荐）
const audioPlayer = playAudioSafely(audioData);

// 方式二：手动控制（需要主动调用清理）
// const audioUrl = createBlobURL(audioData.split(',')[1]);
// const audio = new Audio(audioUrl);
// audio.play();
// 
// // 需要时手动释放
// function stopAudio() {
//   URL.revokeObjectURL(audioUrl);
//   audio.pause();
// }

这里我们通过 createBlobURL 函数将 Base64 编码的数据转换成二进制对象，然后生成 URL，将 URL 设置为 audio 标签的 src，再执行 play 方法，就可以直接将语音播放出来了。

将 Base64 字符串转换为 Blob（二进制对象）的好处：

1. Bas64 字符串增加了数据大小，Blob（二进制对象）减少内存占用（~33%）
2. Base64 字符串嵌入到HTML中，大的字符串影响页面渲染性能
3. audio播放base64字符串，需要先解析字符串，再解码为二进制，再播放。Blob(二进制对象)可直接播放

注意事项：

1. 内存泄漏：每个 Blob URL 都是独立的内存引用，播放完成后必须及时调用 URL.revokeObjectURL()释放
2. 性能影响：解码 1 分钟音频约消耗 5-10ms 主线程时间
3. 格式兼容性：确保 Blob 的 MIME 类型与音频编码完全匹配（如 audio/mpeg 对应 MP3）
4. 错误处理：捕获 atob() 和 decodeAudioData() 可能抛出的异常

方案选型建议